<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="util.js"></script>
    <script type="text/javascript">
        var mouse = {};

        BuildNucleus.prototype = {
            start : function() {
                var a = this.atom;
                var d = this.div;
                var isotope = a.element.name + "-" + a.nucleons;
                /*
                var bt = d.find(".build_target");
                var drop = bt.find(".drop");
                drop.x = util.getLeft(bt) + util.getLeft(drop) + 0.5 * drop.width();
                drop.y = util.getTop(bt) + util.getTop(drop) + 0.5 * drop.height();
                 this.drop = drop;
                */
                for (var j = 0; j < (a.nucleons < 6 ? 8 : 12); j++) {
                    var left = (j % 2 == 0 ? 120 : 540) + (j % 4 < 2 ? 0 : 80); //place left vs right four columns
                    var top = (a.nucleons < 6 ? 120 : 80) + Math.floor(j / 4) * 80;
                    d.append("<canvas class='" + (j % 2 == 0 ? "proton" : "neutron") + "' " +
                            "style='position:absolute;left:" + left + "px;top:" + top + "px;'" +
                            "width='40px' height='40px' left='" + left + "' top='" + top + "'></div>") //left and top are initial position for return location
                }
                d.append("<div class='check_answer'><button>Check<br />Answer</button></div>");
                var btn = d.find(".check_answer button");
                btn.click(this, function(event) { event.data.checkAnswer(); }).button();
                this.addEventListeners();
                drawNucleons(d);
            }
        }

        var ctx;
        var canvas;
        var moving = false;
        //var data = [100, 100, 500, 500];

        /*
        function execute() {
            for (i = 0; i < data.legth / 2; i++) {
                draw(data[(2i)], data[(2i + 1)])
            }
        }
        */
        //$(document).ready(execute);
        //$(document).ready(drawMolecule);

        function circle(x, y, r, c) {
            canvas = $(name1);
            ctx = canvas[0].getContext("2d");

            var rad = ctx.createRadialGradient(x, y, 1, x, y, r);
            rad.addColorStop(0, c);
            rad.addColorStop(1, 'transparent');
            ctx.fillStyle = rad;

            ctx.beginPath();
            ctx.arc(x, y, r, 0, Math.PI*2, false);
            ctx.closePath();
            ctx.fill();
        }
        function element (name, x, y) {
            var color = "purple";
            var r;
            switch (name) {
                case "O": color = "blue"; r = 20; break;
                case "H": color = "red"; r = 10; break;
                case "C": color = "black"; r = 10; break;

            }
            circle(x, y, r, color)
        }
        //ctx.fillRect(0, 0, 256, 256);
        function drawMolecules() {
            var canvi = $("canvas");
            for (var i = 0; i < canvi.length; i++) {
                drawMolecule($(canvi[i]));  // notice how I wrote $(canvi[i]). debug to better understand why.
            }
        }
        
        function drawMolecule(canvas) {
            var molecule = canvas.attr("molecule");
            makeIt("H2O");
            // draw molecule
        }
        $(document).ready(drawMolecules);

        function makeIt(name) {
            var cords;
            switch (name) {
                case "H2O": cords = ["O", 25, 20, "H", 10, 35, "H", 40, 35]; break;
                case "M":   cords = ["O", 110, 80, "H", 95, 100, "H", 125, 100]; break;
            }
            for (var i = 0; i < cords.length / 3; i++) {
                element(cords[(3 * i)], cords[(3 * i + 1)], cords[(3 * i + 2)]);
            }
        }

        //circle(64, 64, 30,'green');


        var mousedown = { x : -1, y : 0 };

        $(document).ready(initializeMouseHandlers);
        function initializeMouseHandlers() {
            $(canvas).bind('mousedown',startMove);
            $(document).bind('mouseup',endMove);
            $(document).bind('mousemove',move);
        }
        function endMove() {
            moving = false;
        }
        function startMove(event) {
                var x = event.pageX;
                var y = event.pageY;
                var position = canvas.position();

                //if(position.left < x && x < (position.left + WIDTH)
                //        && position.top < y && y < (position.top + HEIGHT)) {
                    mousedown = {x : event.offsetX, y: event.offsetY};
                    moving = true;
                    console.log("offsetX = " + event.offsetX + ", offsetY = " + event.offsetY);
                    console.log("pageX = " + event.pageX + ", pageY = " + event.pageY);
                //}
        }

        function move(event) {
            var x = event.pageX;
            var y = event.pageY;

            if(moving) {
                var css = {left : x - mousedown.x , top : y - mousedown.y};
                canvas.css(css);
            }
        }

    </script>
    <style type="text/css">
        canvas {
            position : absolute;
        }
    </style>
</head>
<body>
<canvas molecule="H2O" width="50" height="45" style="background: grey"></canvas>
<canvas molecule="CO2" width="50" height="45" style="background: blue"></canvas>
<canvas molecule="O2" width="50" height="45" style="background: green"></canvas>
<canvas id="name1" molecule="CH4" width="50" height="45" style="background: yellow"></canvas>
</body>
</html>